<!DOCTYPE html>
<html>
<head>
    <style>
        #demo {
            background: yellow;
            position: absolute;
            width: 100px;
            height: 100px;
            border: 5px solid black;
            cursor: move;
            text-align: center;
            line-height: 100px;
            font-size: 24px;
            font-weight: bold;
        }
    </style>
    <title>jQuery Drag</title>

    <!-- icons -->
    <link rel="icon" href="../../../lib/image/favicon.ico"/>
    <link rel="shortcut icon" href="../../../lib/image/favicon.ico"/>
</head>
<body>
<div id="demo">drag me</div>
<script src="../.././../lib/js/jquery-1.9.0.min.js"></script>
<script>
    (function ($) {
        var Drag = function (element, options) {
            this.elem = $(element);
            this.settings = $.extend({}, typeof options == 'object' && options);
            this.init()
        };
        Drag.prototype = {
            constructor:Drag,
            init:function () {
                var _this = this;
                this.elem.css({
                    'opacity':.5,
                    'cursor':'move'
                }).on('mousedown',function (e) {
                    e.preventDefault();
                    $(this).css('opacity', 1);
                    var gapX, gapY;
                    gapX = e.pageX - _this.elem.offset().left;
                    gapY = e.pageY - _this.elem.offset().top;
                    $(document).on('mousemove', function (e) {
                        e.preventDefault();
                        _this.elem.css({
                            top:e.pageY - gapY,
                            left:e.pageX - gapX
                        });
                    })
                })
                .on('mouseup', function () {
                    _this.elem.css('opacity', .5);
                    $(document).off('mousemove')
                });
            }

        };
        var drag = new Drag('#demo')
    })(window.jQuery)
</script>
</body>
</html>